import React, { Component } from 'react';
import classnames from 'classnames';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Button, Radio, Checkbox, Spin } from 'antd';
import { WeaProgress, WeaAvatar } from "ecCom";
import VotePersonList from './VotePersonList';

@inject('groupListStore')
@observer
export default class VoteDetails extends Component {
  constructor(props) {
    super(props)
    this.prefixCls = `${props.prefixCls}-detail`;
    this.state = {
      value: 1,
    }
  }

  onChange = e => {
    this.setState({
      value: e.target.value,
    });
  };

  mutipleCheck = (e, id) => {
    const { groupListStore } = this.props;
    const { setStoreState, selectedKeys } = groupListStore;
    const check = e.target.checked;
    if (check && selectedKeys.indexOf(id) === -1) {
      setStoreState({selectedKeys: [...selectedKeys, id]})
    } else if (!check && selectedKeys.indexOf(id) > -1) {
      let tempArr = selectedKeys.filter(v => v !== id);
      setStoreState({selectedKeys: tempArr});
    }
  }

  renderOps = (data) => {
    const { groupListStore } = this.props;
    const { setStoreState } = groupListStore;
    if (data.votestatus === '0' && data.hasvote === '0') { // 进行中，个人未投票
      if (data.choosemodel === '1') { // 多选
        return (
          <div className={`${this.prefixCls}-option-mutiple`}>
            {
              data.options && data.options.map(v => {
                return (
                  <Checkbox key={v.optionid} className={`${this.prefixCls}-option`} onChange={(e) => this.mutipleCheck(e, v.optionid)}>
                    <span>{v.optioncontent}</span>
                    <div className={`${this.prefixCls}-option-imgs`}>
                      {
                        v.optionimg && v.optionimg !== '' && v.optionimg.split(',').map((img, index) => (
                          <img src={img} alt=''/>
                        ))
                      }
                    </div>
                  </Checkbox>
                )
              })
            }
          </div>
        )
      } else if (data.choosemodel === '0') { // 单选
        return (
          <Radio.Group name="voteRadio" onChange={e => setStoreState({selectedKeys: [e.target.value]})}>
            {
              data.options && data.options.map((v, index) => {
                return (
                  <Radio value={v.optionid} className={`${this.prefixCls}-option`}>
                    <div>{v.optioncontent}</div>
                    <div className={`${this.prefixCls}-option-imgs`}>
                      {
                        v.optionimg && v.optionimg !== '' && v.optionimg.split(',').map((img, index) => (
                          <img src={img} alt=''/>
                        ))
                      }
                    </div>
                  </Radio>
                )
              })
            }
          </Radio.Group>
        )
      }
    } else if (data.votestatus === '1' || data.hasvote === '1') {
      return <div className={`${this.prefixCls}-container-options`}>
        {
           data.options && data.options.map(v => {
            return (
              <div className={`${this.prefixCls}-container-optionItem`}>
                <div className='title'>
                  <span>{v.optioncontent}</span>
                  <span className='count'>{v.votecount}票</span>
                </div>
                <WeaProgress percent={Number(v.votepercent)} showInfo={false}/>
              </div>
            )
          })
        }
      </div>
    }
  }

  renderPerson = (bool, label, person, data, params) => {
    if (bool) {
      if (data) {
        return (
          <div className={`${this.prefixCls}-peopleList`}>
            <div className={`${this.prefixCls}-peopleList-title`}>
              <span className='label'>{label}</span>
              {
                (person && person.length > 0) && (
                  <span className='todetail' onClick={() => this.viewPerson(params)}>查看详情 <i className="icon-coms-Right" /></span>
                )
              }
            </div>
            <div className={`${this.prefixCls}-peopleList-person`}>
              {
                (person && person.length > 0) && person.map(item => (
                  <div className={`${this.prefixCls}-peopleList-person-item`} key={item.voteuserid}>
                    <WeaAvatar url={item.messagerurl} name={item.voteusername} style={{ width: 30, height: 30 }}/>
                    <div className={'name'}>{item.voteusername}</div>
                  </div>
                ))
              }
            </div>
          </div>
        )
      }
    }
  }

  onCancel = () => {
    const { groupListStore } = this.props;
    const { setStoreState, listStore } = groupListStore;
    setStoreState({ isShowDetail: false, dataInfo: {} });
    listStore.tableUpdate({showCheck: true})
  }

  // 查看人员列表详情
  viewPerson = (usertype) => {
    const { groupListStore } = this.props;
    const { setStoreState, groupchatvoteprelist } = groupListStore;
    const personTitle = usertype === '0' ? '已投票人员' : '未投票人员';
    setStoreState({ personVisible: true, usertype, personTitle }, groupchatvoteprelist);
  }
  
  render() {
    const { groupListStore } = this.props;
    const { isShowDetail, dataInfo, onVote, saveLoading, detailLoading } = groupListStore;
    const data = toJS(dataInfo);
    const detailCls = classnames({
      [this.prefixCls]: true,
      'isShow': isShowDetail
    })
    const votedCls = classnames({
      [`${this.prefixCls}-box`]: true,
      'hasBtn': data.votestatus === '0',
    })
    if (detailLoading) {
      return (
        <div className={detailCls}>
          <Spin />
        </div>
      )
    }
    return (
      <div className={detailCls}>
        <div className={votedCls}>
          <div className={`${this.prefixCls}-header`}>
            <div className={`${this.prefixCls}-header-box`}>
              <div className={`${this.prefixCls}-header-theme wea-f14`}>
                {data.votetheme}
                {
                  data.votestatus === '0' ? <span className='group-voting-state-ing'>进行中</span> :
                  <span className='group-voting-state-end'>已结束</span>
                }
              </div>
              <div className={`${this.prefixCls}-header-info`}>
                <span className='creater'>{data.creatername}</span>
                <span className='time'>{`${data.createdate} ${data.createtime}`}</span>
              </div>
            </div>
            <i className="icon-coms-Clear" onClick={this.onCancel} />
          </div>
          
          {
            data.themepicsrc !== '' && (
              <div className={`${this.prefixCls}-themeImg`}>
                <img alt='' src={data.themepicsrc || ''}/>
              </div>
            )
          }
          
          <div className={`${this.prefixCls}-container`}>
            <div className={`${this.prefixCls}-container-title`}>
              <span>{data.choosemodelshow} {data.votestatus === '0' && data.choosemodel === '1' && `(最多可选${data.maxvoteoption}项)`}</span>
            </div>
            { this.renderOps(data) }
            <div className={`${this.prefixCls}-container-endTime`}>{`截止时间：${data.enddate} ${data.endtime}`}</div>
          </div> 

          { this.renderPerson(data.voteprivacy === '0' && (data.votestatus === '1' || data.hasvote === '1'), data.votelabel, data.havevotedpersons, data, '0') }
          { this.renderPerson(data.voteprivacy === '0' && (data.votestatus === '1' || data.hasvote === '1'), data.notvotelabel, data.havenotvotedpersons, data, '1') }
        </div>
        {
          data.votestatus === '0' && data.hasvote === '0' && 
          <Button type='primary' loading={saveLoading} className={`${this.prefixCls}-publish`} onClick={() => onVote()}>投票</Button>
        }
        <VotePersonList/>
      </div>
    )
  }
}
